<template>
   <!--//使用scroll组件，本身的高度一定需要初始化一个值，如height：100%，具体高度继承父元素！只有当其子元素如ul高度大于其时候才能正常滚动，
   同时注意scroll组件初始化的时机-->
   <scroll class="scroll-container" @scrollToEnd="loaderMore" @scroll="scroll" :pullup="pullup" :probe-type="probeType" :listen-scroll="listenScroll" :data="shopListArr" ref="list" >
        <ul ref="scrollChild">
          <router-link ref="listItem" :to="{path:'shop',query:{geohash,id:item.id}}" v-for="item in shopListArr" tag="li" :key="item.id" class="shop_li">
            <section>
              <img v-lazy="imgBaseUrl + item.image_path" class="shop_img">
            </section>
            <div class="shop_right">
              <header class="shop_detail_header">
                <h4 :class="{'premiun':item.is_premium}" class="shop_title ellipsis">
                  {{item.name}}
                </h4>
                <ul class="shop_detail_ul">
                  <li v-for="item in item.supports" :key="item.id" class="supports">{{item.icon_name}}</li>
                </ul>
              </header>
              <h5 class="rating_order_num">
                <section class="rating_order_num_left">
                  <section class="rating_section">
                    <yd-rate slot="left" color="#ff6000" v-model='RATING'></yd-rate>
                    <span class="rating_num">{{item.rating}}</span>
                  </section>
                  <section class="order_section">
                    月售{{item.recent_order_num}}单
                  </section>
                </section>
                <section class="rating_order_num_right">
                <span class="delivery_style delivery_left" v-if="item.delivery_mode">
                 {{item.delivery_mode.text}}
                </span>
                  <span class="delivery_style delivery_right" v-if="isSuport(item.supports)">
                  准时达
                </span>
                </section>
              </h5>
              <h5 class="fee_distance">
                <p class="fee">
                  ¥{{item.float_minimum_order_amount}}起送
                  <span class="segmentation">/</span>
                  {{item.piecewise_agent_fee.tips}}
                </p>
                <p class="distance_time">
               <span v-if="Number(item.distance)">{{item.distance > 1000? (item.distance/1000).toFixed(2) + 'km': item.distance + 'm'}}>
								<span class="segmentation">/</span>
							</span>
                  <span v-else>{{item.distance}}</span>
                  <span class="segmentation">/</span>
                  <span class="order_time">{{item.order_lead_time}}</span>
                </p>
              </h5>
            </div>
          </router-link>
          <p v-if="touchend" class="empty_data">{{loadText}}</p>
        </ul>
      <div class="loading-container" v-show="!shopListArr.length">
       <loading></loading>
      </div>

     <ul v-show="!shopListArr.length" class="animation_opactiy">
       <!--没有数据则显示水印矢量图-->
       <li class="list_back_li"  v-for="item in 10" :key="item">
         <img src="../../../images/shopback.svg" class="list_back_svg">
       </li>
     </ul>

     <aside class="return_top" @click="backTop">
       <svg class="back_top_svg">
         <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#backtop"></use>
       </svg>
     </aside>

   </scroll>
</template>

<script type="text/ecmascript-6">
import headTop from 'components/header/head'
import {mapGetters} from 'vuex'
import {imgBaseUrl} from 'src/config/env'
import {shopList} from 'src/service/getData'
import scroll from 'components/common/scroll/scroll'
import loading from 'components/common/loading/loading'
//定义加载数据的条数，只用于模拟，因为数据量少，便于演示上啦加载
const listNum = 10;
  export default {
  data(){
  return{
    offset: 0, // 批次加载店铺列表，每次加载20个 limit = 20
    imgBaseUrl,
    shopListArr:[], // 店铺列表数据
    touchend: false, //没有更多数据
    showLoading: true,//显示加载动画
    preventRepeatReuqest:false,//到达底部加载数据，防止重复加载
    loadText:'没有更多了',
    pullup:true,//开启上拉刷新
    scrollY:'',//垂直滚动距离
    goToTopFlag:false,
    scrollHeight:300,
    RATING:4//插件不支持小数点，暂时写固定！
  }
   },
    props: ['restaurantCategoryId', 'restaurantCategoryIds', 'sortByType', 'deliveryMode', 'supportIds', 'confirmSelect', 'geohash'],
   created(){
     this.probeType = 3;
     this.listenScroll = true;
     this.initData();
   },
   mounted(){

   },
   computed: {
   },
   methods: {
     async initData(){
       let res = await shopList(this.latitude, this.longitude, this.offset, this.restaurantCategoryId);
       this.shopListArr = res.slice();
        if(res.length < listNum){
          // 少于20条，则没有更多
          this.touchend = true;
          this.hideLoading();
        }
     },
     //插件的bug，不支持传入小数点
     changeNum(num){
       return Math.floor(num);
     },
     async loaderMore(){
       if (this.touchend) {
         return
       }
       //防止重复请求
       if (this.preventRepeatReuqest) {
         return
       }
       this.preventRepeatReuqest = true;
       //数据的定位加6位,模拟上拉演示
       this.offset +=6;
       let res = await shopList(this.latitude, this.longitude, this.offset, this.restaurantCategoryId);
       this.hideLoading();
       //this.shopListArr = [...this.shopListArr, ...res];
       this.shopListArr = this.shopListArr.concat(res);

       //当获取数据小于10，说明没有更多数据，不需要再次请求数据
       if (res.length < listNum) {
         this.touchend = true;
         return
       }
       this.preventRepeatReuqest = false;
     },
     //开发环境与编译环境loading隐藏方式不同
     hideLoading(){
       this.showLoading = false;
     },
     //是否支持准时配送
     isSuport(items){
       let flag = false;
       if((items instanceof Array)&& items.length ){
         items.forEach((item)=>{
           if(item.icon_name === '准'){
             flag = true;
             return false
           }
         })
       }else{
         flag = false
       }
       return flag
     },
     scroll(pos){
       //实时滚动的y指
       this.scrollY = pos.y
     },
     backTop(){
        if(this.goToTopFlag){
          this.$refs.list.scrollToElement(this.$refs.listItem[0].$el,300)
        }
     },
     //监听父级传来的数据(props)发生变化时，触发此函数重新根据属性值获取数据
     async listenPropChange(){
       this.showLoading = true;

       this.offset = 0;
       let res = await shopList(this.latitude, this.longitude, this.offset, '', this.restaurantCategoryIds, this.sortByType, this.deliveryMode, this.supportIds);
       this.hideLoading();
       //考虑到本地模拟数据是引用类型，所以返回一个新的数组
       /*this.shopListArr = [...res];*/
       this.shopListArr = res.slice();
     },
   },
   components:{
     scroll,
     loading,
    headTop
   },
    watch:{
      scrollY(newY){
        if( Math.abs(newY)>this.scrollHeight ){
          this.goToTopFlag = true;
        }
      },
      //监听父级传来的restaurantCategoryIds，当值发生变化的时候重新获取餐馆数据，作用于排序和筛选
      restaurantCategoryIds: function (value){
        this.listenPropChange();
      },
      //监听父级传来的排序方式
      sortByType: function (value){
        this.listenPropChange();
      },
      //监听父级的确认按钮是否被点击，并且返回一个自定义事件通知父级，已经接收到数据，此时父级才可以清除已选状态
      confirmSelect: function (value){
        this.listenPropChange();
        this.$emit('DidConfrim');
      }
    }
  }
</script>
<style scoped lang="scss" rel="stylesheet/scss">
@import '../../../style/mixin';
/*scroll组件刚开始一定要有个初始值！这个值继承自父元素高度!父元素想办法定义好一个高度，不要在scroll组件定义死高度！否则其它组件引入，高度将不适应*/
.scroll-container{
/*  position: fixed;
  width: 100%;
  top: 88px;
  bottom: 0;
  background-color: $fc;*/
  height: 100%;
  overflow: hidden;
}
.shoplist_container{
  position:relative;
  background-color: #fff;
  margin-bottom: 2rem;
}
.animation_opactiy{
  position: absolute;
  top:0;
  width: 100%;
}
.shop_li{
  display: flex;
  border-bottom: 0.025rem solid #f1f1f1;
  padding: 0.7rem 0.4rem;
}
.shop_img{
  @include wh(2.7rem, 2.7rem);
  display: block;
  margin-right: 0.4rem;
}
.list_back_li{
  height: 4.85rem;
  .list_back_svg{
    @include wh(100%, 100%)
  }
}
.shop_right{
  flex: auto;
  .shop_detail_header{
    @include fj;
    align-items: center;
    .shop_title{
      width: 8.5rem;
      color: #333;
      padding-top: .01rem;
      @include font(0.65rem, 0.65rem, 'PingFangSC-Regular');
      font-weight: 700;
    }
    .premium::before{
      content: '品牌';
      display: inline-block;
      font-size: 0.5rem;
      line-height: .6rem;
      color: #333;
      background-color: #ffd930;
      padding: 0 0.1rem;
      border-radius: 0.1rem;
      margin-right: 0.2rem;
    }
    .shop_detail_ul{
      display: flex;
      transform: scale(.8);
      margin-right: -0.3rem;
      .supports{
        @include sc(0.5rem, #999);
        border: 0.025rem solid #f1f1f1;
        padding: 0 0.04rem;
        border-radius: 0.08rem;
        margin-left: 0.05rem;
      }
    }
  }
  .rating_order_num{
    @include fj(space-between);
    height: 0.6rem;
    margin-top: 0.52rem;
    .rating_order_num_left{
      @include fj(flex-start);
      .rating_section{
        display: flex;
        .rating_num{
          @include sc(0.4rem, #ff6000);
          margin: 0 0.2rem;
        }
      }
      .order_section{
        transform: scale(.8);
        margin-left: -0.2rem;
        @include sc(0.4rem, #666);
      }
    }
    .rating_order_num_right{
      display: flex;
      align-items: center;
      transform: scale(.7);
      min-width: 5rem;
      justify-content: flex-end;
      margin-right: -0.8rem;
      .delivery_style{
        font-size: 0.4rem;
        padding: 0.04rem 0.08rem 0;
        border-radius: 0.08rem;
        margin-left: 0.08rem;
        border: 1px;
      }
      .delivery_left{
        color: #fff;
        background-color: $blue;
        border: 0.025rem solid $blue;
      }
      .delivery_right{
        color: $blue;
        border: 0.025rem solid $blue;
      }
    }
  }
  .fee_distance{
    margin-top: 0.52rem;
    @include fj;
    @include sc(0.5rem, #333);
    .fee{
      transform: scale(.9);
      @include sc(0.5rem, #666);
    }
    .distance_time{
      transform: scale(.9);
      span{
        color: #999;
      }
      .order_time{
        color: $blue;
      }
      .segmentation{
        color: #ccc;
      }
    }
  }
}
.loader_more{
  @include font(0.6rem, 3);
  text-align: center;
  color: #999;
}
.empty_data{
  position: relative;
  @include sc(0.5rem, #666);
  text-align: center;
  line-height: 2rem;
}
.return_top{
  position: fixed;
  bottom: 3rem;
  right: 1rem;
  .back_top_svg{
    @include wh(2rem, 2rem);
  }
}

</style>
